const htmlWebpackplugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
    entry: './src/common/app.js', // 入口
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'build.js'
    },
    plugins: [
        new htmlWebpackplugin({
            filename: 'index.html',
            template: 'src/common/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['react']
                    }
                }]
            },
            // 处理css文件中出现的url, 会自动帮你引入里面要引用的模块
            {
                test: /\.css$/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        localIdentName: '[path]-[name]-[local]-[hash:base64:6]'
                    }
                }, 'sass-loader'],
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, 'src/common')
                ]
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
                include: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, 'src/common')
                ]
            },
            {
              test: /\.scss$/,
              use: [
                  'style-loader', 
                  {
                      loader: 'css-loader',
                      options: {
                          modules: true
                      }
                  }, 
                  'sass-loader']
            },
            // file-loader
            // 1. 把资源移动到输出目录
            // 2. 返回最终引入资源的url
            {
                test: /\.(jpg|png|gif|jpeg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 10000 // 10kb 1kb ~= 1024 byt 小于10kb 的图片就用 urlloader 进行编码
                    }
                }]
            }
        ]
    },
    devServer: {
        // open: true,
        contentBase: './src/common',
        inline: true, // 实时刷新
        hot: true
    }
}